<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>右键菜单插件</title>
    <link href="contextmenu.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    #divtest {
        width: 282px;
    }

    #divtest .title {
        padding: 8px;
        background-color: Blue;
        color: #fff;
        height: 23px;
        line-height: 23px;
        font-size: 15px;
        font-weight: bold;
    }

    #divtest .content {
        padding: 8px 0px;
        background-color: #fff;
        font-size: 13px;
    }

    #divtest .content .tip {
        text-align: center;
        border: solid 1px #ccc;
        background-color: #eee;
        margin: 20px 0px;
        padding: 8px;
        display: none;
    }

    .fl {
        float: left;
    }

    .fr {
        float: right;
    }
    </style>
    <script type="text/javascript" src="http://www.imooc.com/data/jquery-1.8.2.min.js"></script>
    <script src="contextmenu.js" type="text/javascript"></script>
</head>

<body>
    <div id="divtest">
        <div class="title"><span class="fl">点击右键</span></div>
        <div class="content">
            <input id="btnSubmit" type="button" value="提交" />
            <div class="tip"></div>
        </div>
        <div class="contextMenu" id="sysMenu">
            <ul>
                <li id="Li3"><img src="http://img.mukewang.com/52e4b34b0001bb6d00160016.jpg" alt="" />保存</li>
                <li id="Li4"><img src="http://img.mukewang.com/52e4b3680001424900160016.jpg" alt="" />退出</li>
            </ul>
        </div>
    </div>
    <script type="text/javascript">
    $(function() {
        $("#divtest").contextMenu('sysMenu', {
            bindings: {
                'Li3': function(Item) {
                    $(".tip").show().html("您点击了“保存”项");
                },
                'Li4': function(Item) {
                    $(".tip").show().html("您点击了“退出”项");
                }
            }
        });
    });
    </script>
</body>

</html>